<template>
  <view>
    <view class="goods-box" @click="chooseGoods(item.productId)">
      <view class="image">
        <image :src="item.mainImageUrl" mode=""></image>
      </view>
      <view class="goods-name">
        {{item.name}}
      </view>
      <view class="price">
        <text class="value">{{item.price}}</text>
        <text class='name'>积分</text>
        <text class="add">+</text>
        <text class="value">{{item.cashPrice}}</text>
        <text class="name">元</text>
      </view>
      <view class="type" :style='{backgroundColor: typeColor[item.categoryName]}'>
        {{item.categoryName}}
      </view>
    </view>
  </view>
</template>
<script>
  export default {
    props: {
      item: Object
    },
    data() {
      return {
        typeColor: {
          "服饰类": "orange",
          "电子产品类": "#0020ff",
          "书籍类": "#f00",
          "生活用品类": "#6e89eb",
          "食品类": "yellowgreen",
          "其他类": "purple",
        }
      }
    },
    methods: {
      chooseGoods(id) {
        this.$emit('chooseGoods', id)
      },
    },
    computed: {}
  }
</script>
<style lang="scss">
  .goods-box {
    display: flex;
    flex-direction: column;
    width: 340rpx;
    margin: 0 10rpx;
    margin-left: 20rpx;
    margin-bottom: 30rpx;
    padding-bottom: 20rpx;
    background-color: #fff;
    color: #333;

    .image {
      width: 340rpx;
      height: 340rpx;

      image {
        width: 100%;
        height: 100%;
      }
    }

    .goods-name {
      padding: 5rpx;
      font-size: 34rpx;
    }

    .price {
      padding: 10rpx;
      font-size: 34rpx;
      color: #ff7000;

      .value {
        margin-right: 5rpx;
        font-size: 36rpx;
      }

      .name {
        font-size: 26rpx;
      }
    }

    .add {
      font-size: 22rpx;
    }

    .type {
      font-size: 24rpx;
      width: fit-content;
      height: 30rpx;
      margin-left: 10rpx;
      padding: 2rpx 10rpx;
      background-color: red;
      color: #f1f1f1;
      text-align: center;
      line-height: 30rpx;
    }
  }
</style>